<!-- 学员端 -->
<template>
	<view class="top_view">
		<!-- 按钮关联的弹出框 -->
		<view>
			<!-- 区域 搜索框 -->
			<u-select v-model="cityshow" :list="cityData" @confirm="cityconfirm"></u-select>
			<!-- 考场搜索框 -->
			<u-select v-model="groundshow" :list="groundData" @confirm="groundconfirm"></u-select>
			<!-- 考场搜索框 -->
			<u-select v-model="clazzshow" :list="clazzData" @confirm="clazzconfirm"></u-select>
		</view>
		<!-- 头部选择按钮 区域、考场-->
		<view class="flex_view">
			<u-button class="item_flex" type="primary" @click="cityshow = !cityshow">
				<span class="flex_span">{{cityItem.label}}</span>
				<u-icon name="arrow-down-fill" color="#ffffff" size="28"></u-icon>
			</u-button>
			<u-button class="item_flex" type="primary" @click="groundshow = !groundshow">
				<span class="flex_span">切换考场</span>
				<u-icon name="reload" color="#ffffff" size="28"></u-icon>
			</u-button>
			<u-button class="item_flex" type="primary" @click="clazzshow = !clazzshow">
				<span class="flex_span">{{clazzItem.label}}</span>
				<u-icon name="reload" color="#ffffff" size="28"></u-icon>
			</u-button>
		</view>
		<!-- 头部展示栏 -->
		<view class="ground_view">
			<view class="item_ground_view">
				<span>{{groundItem.label}}</span>
			</view> 
		</view>
		 
		<view class="acticities-item" v-for="(item,itemIndex) in commodityList" :key="itemIndex">
			<image class="video-img" v-if="item.cover!=null&&item.cover!=''" :src="tutorial+item.cover"></image>
			<image class="video-img" v-else-if="item.clazz === 1" src="/static/icon_md.png"></image>
			<image class="video-img" v-else-if="item.clazz === 2" src="/static/icon_ai.png"></image>
			<image class="video-img" v-else-if="item.clazz === 3" src="/static/icon_spjx.png"></image>
			<view class="content-right" @click="itemClick(item)">
				<!--  -->
				<!-- <view class="item-title">（{{item.name}}）{{item.line_name}}（{{item.purchase_notes}}） -->
				<view class="item-title">{{item.name}}
				</view>
				<view class="item-price">
					<span class="price-dw">￥{{item.price/100}}</span>
					<span class="playback_count">播放量：{{item.playback_count}}</span>
					<span class="playback_count"> </span>
				</view>
			</view>
			<view class="share" v-if="item.iscommodity==1">
				<view class="share_item">
						教练
				</view>
			</view>
			<!-- <view class="share2" v-if="item.iscommodity!=0">
				<view class="share_item">
						力荐
				</view>
			</view> -->
			
		</view> 
		<u-tabbar v-model="current" :height="100" :list="list"></u-tabbar>
	</view>
</template>
<script>
	import KTabsSwiper from '@/uni_modules/k-tabs-swiper/components/k-tabs-swiper/k-tabs-swiper.vue';

	import {
		getCommodity,
		getGroundList,
		getcityList
	} from '@/common/api/index.js';
	export default {
		components: {
			KTabsSwiper
		},
		data() {
			return {
				tutorial: "http://www.dowell-driver.com/wdzs", //视频地址
				cityshow: false,
				groundshow: false,
				clazzshow: false,
				cityData: [{
					value: '0',
					label: '暂无区域'
				}],
				groundData: [{
					value: '0',
					label: '暂无考场'
				}],
				clazzData: [{
					value: 0,
					label: '全部类型'
				},{
					value: 2,
					label: 'AI教练'
				},{
					value: 3,
					label: '视频教学'
				}],
				cityItem: {
					value: 0,
					label: "请选择区域"
				},
				groundItem: {
					value: 0,
					label: "请选择考场"
				},
				clazzItem:{
					value: 0,
					label: "全部类型"
				},
				showNoData: false,
				subsectionlist: ['全部类型','AI教练', '视频教学'],
				current: 0,
				tabs: ['水头', '南头', '陆丰'],
				commodityList: [],
				isListFinished: [],
				radios: [{
						checked: true,
						id: 1
					},
					{
						checked: false,
						id: 2
					},
					{
						checked: false,
						id: 3
					}
				],
				openid: null,
				GroundList: [],
				getcityList: [],
				
				list: [{
						pagePath: "/pages/student/index/coach",
						iconPath: "/static/tabbar/tab_home_normal.png",
						selectedIconPath: "/static/tabbar/tab_home_select.png",
						text: '首页',
					},
					{
						pagePath: "/pages/student/order/index",
						iconPath: "/static/tabbar/tab_order_normal.png",
						selectedIconPath: "/static/tabbar/tab_order_select.png",
						text: '订单',
					},
					{
						pagePath: "/pages/student/my/index",
						iconPath: "/static/tabbar/tab_mine_normal.png",
						selectedIconPath: "/static/tabbar/tab_mine_select.png",
						text: '我的',
					},
				],
				current: 0,
				visible: 0,
				commodity_id: null,
			}
		},
		onLoad(options) {
			this.init();

			this.openid = uni.getStorageSync('openId');
			let visible_o = uni.getStorageSync('visible');
			let commodity_id_o = uni.getStorageSync('commodity_id');
			let Coach_id_o = uni.getStorageSync('Coach_id');
			
			if(visible_o){
				this.visible=visible_o
			}
			if(Coach_id_o){
				thisCoach_id=Coach_id_o
			}
			if(commodity_id_o){
				this.commodity_id=commodity_id_o
				this.getList_commodity()
			}
			
			console.log(this.visible,this.commodity_id,'commodity_id111111');
			console.log(options,'options');
			
			// if(options!=null&&options!=""){
			// 	uni.setStorageSync('studentQuery',JSON.stringify(options));
			// }else{
			// 	uni.setStorageSync('studentQuery',"");
			// }
		},
		methods: {
			getList_commodity(){
				console.log(this.visible,this.commodity_id,'commodity_id');
				if(this.visible==1&&this.commodity_id!=null){
					getCommodity({commodity_id:this.commodity_id,visible:this.visible}).then(res => {
						if (res.status == 0) {
							res.data.forEach(i=>{
								i.iscommodity=1
								this.commodityList.push(i)
							})
							// this.commodityList = this.commodityList.concat()
						} else {
							uni.showToast({
								title: res.msg ? res.msg : '错误状态码：' + res.status,
								icon: 'error'
							})
						}
					})
				}
			},
			// 区域点击
			cityconfirm(val) {
				if (val.length > 0) {
					this.cityItem = val[0]
					this.getGround(this.cityItem.value)
				} else {
					this.cityItem = {
						value: 0,
						label: "请选择区域"
					}
				}
			},
			// 考场点击
			groundconfirm(val) {
				if (val.length > 0) {
					this.groundItem = val[0]
				} else {
					this.groundItem = {
						value: 0,
						label: "请选择区域"
					}
				}
			},
			// 类型点击
			clazzconfirm(val){
				if (val.length > 0) {
					this.clazzItem = val[0]
					this.getCommodityList({clazz:val[0].value})
				} else {
					this.clazzItem = {
						value: 0,
						label: "全部类型"
					}
					this.getCommodityList({})
				}
			},
			// 获取城市
			getcity() {
				getcityList().then(res => {
					this.getcityList = res.data;
					if (res.status == 0) {
						this.cityData = []
						res.data.forEach(i => {
							this.cityData.push({
								value: i.id,
								label: i.name
							})
						})
						if(this.cityData.length>0){
							this.cityItem = this.cityData[0]
						}
						this.getGround(res.data[1].id)
					}
				})
			},
			// 获取考场
			getGround(city_id_) {
				getGroundList({
					city_id: city_id_
				}).then(res => {
					if (res.status == 0) {
						this.GroundList = res.data;
						this.tabs = [];
						this.groundData = [];
						
						res.data.forEach(i => {
							this.tabs.push(i.name)
							this.groundData.push({
								value: i.id,
								label: i.name
							})
						})
						if(this.groundData.length>0){
							this.groundItem = this.groundData[0]
						}
					}
				})
			},
 
			changelistcurrent(index) {
				if(index==0){
					this.getCommodityList({})
				}else{
					this.getCommodityList({clazz:index+1,})
				} 
			},
			radioClick(name) {
				console.log(name, 'name');
			},
			//此为测试用方法
			init() {
				// 获取城市名称
				this.getcity();

				// 请求门店套餐接口
				this.changelistcurrent(0); 
			},
			getData(index) {
				let newArr = new Array(20).fill([]);
				this.$set(this.tabsLists, index, this.tabsLists[index].concat(newArr))

			},
			load(index) {
				this.isListFinished[index].pageNum++;
				uni.showToast({
					title: `第${index}个触发底部，页码${this.isListFinished[index].pageNum}`,
					icon: 'none',
				})
				this.getData(index)
			},
			changeTab(index) {
				// uni.showToast({
				// 	title: `第${index}个`,
				// 	icon: 'none',
				// })
				this.getData(index)
			},
			itemClick(item) {
				// 在这里处理点击事件，并使用item作为参数
				const paramJson = JSON.stringify(item);
				console.log('Item clicked:', item);
				//主要看下面这段代码
				uni.navigateTo({
					url: '/pages/student/index/orderPay?orderDetail= ' + JSON.stringify(item)
				})
				// uni.showToast({
				// 	title: `${item.name}`,
				// 	icon: 'none',
				// })

			},
			getCommodityList(param) { 
				
				let studentQuery = uni.getStorageSync('studentQuery');
				if(studentQuery!=null&&studentQuery!=""){
					console.log(studentQuery);
					let parsestudentQuery= JSON.parse(studentQuery)
					if(parsestudentQuery){
						for (let key in parsestudentQuery) {
							param[key]=parsestudentQuery[key]
						}
					}
				}
				console.log(param,'请求套餐接口-params');
				
				getCommodity(param).then(res => {
					console.log(res, '商品信息');
					if (res.status == 0) {
						this.commodityList = []
						if (res.data.length == 0) {
							this.showNoData = true
						} else {
							this.showNoData = false
							this.commodityList = this.commodityList.concat(res.data)
						}
					} else {
						uni.showToast({
							title: res.msg ? res.msg : '错误状态码：' + res.status,
							icon: 'error'
						})
					}


				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	// .top_view{
	// 	padding: 5px;
	// }
	.title {
		font-weight: bold;
		padding: 16rpx;
	}

	.line_img {
		width: 42rpx;
		height: 17rpx;
	}

	.empty-img {
		width: 240px;
		height: 180px;
	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
	}

	.item-active {
		background: rgb(204, 204, 204);
	}

	.loading {
		text-align: center;
		padding: 20rpx 0;
	}


	.acticities-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 10px;
		border: 1px solid rgba(0, 0, 0, 0.1);

		.video-img {
			width: 100px;
			height: 100px;
			margin-right: 10px;
			padding: 10px;
		}

		.content-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.item-title {
				font-size: 16px;
				font-weight: bold;
			}

			.item-uptatetime {
				font-size: 12px;
				// color: #888;
				color: #ff0000;
				margin-top: 15rpx;
			}

			.price_back {
				width: 80px;
				background: rgba(244, 134, 0, 0.5);
				border-radius: 5px;
				text-align: center;

			}

			.item-price {
				font-size: 20px;
				color: #ff0000;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				padding-right: 10px;
			}

			.playback_count {
				padding-left: 20px;
				font-size: 12px;
				color: #888;
				margin-top: 15rpx;
			}

			.item-payunm {
				font-size: 14px;
				color: #888;
				margin-top: 10rpx;
			}
		}

		.share { 
			position: absolute;
			margin-top: -68px;
			left: 0;
			width: 0;
			border-right: 50px solid transparent;
			border-top: 50px solid rgba(255,0,0,0.5);
			.share_item{
				position: absolute;
				top: -50px;;
				color: white;
			}
		}
		.share2 { 
			position: absolute;
			margin-bottom: -68px;
			right: 0;
			width: 0;
			border-left: 50px solid transparent;
			border-bottom: 50px solid rgba(255,0,0,0.5);
			.share_item{
				position: absolute;
				top: -50px;;
				color: white;
			}
		}
	}

	.flex_view {
		margin-top: 10px;
		display: flex;

		.item_flex {
			background-color: rgba(244, 134, 0,1);
			flex: 1;
			margin: 0px 10px;
			.flex_span {
				padding: 0px 10px;
			}
		}
		.item_flex:nth-child(1){
			margin-left: 0px;
		}
		.item_flex:nth-child(2){
			margin-right: 0px;
		}
	}
	.ground_view{
		margin-top: 30px;
		margin-bottom: 10px;
		display: flex;
		.item_ground_view{
			flex: 2;
			margin: 0px 10px;
			border-left: 5px solid rgba(244, 134, 0, 1);
			height: 40px;
			line-height: 40px;
			padding-left: 25px;
			font-weight: 600;
			font-size: 20px;
		}
		.item_flex_button{
			flex: 1;
			height: 40px;
			line-height: 40px;
			background-color: white;
			border: 3px solid #409EFF;
			border-radius: 10px;
			color: #409EFF;
			margin-right: 5px;
		}
	}
	
</style>